<!doctype html>

<html>

<head>
  <meta http-equiv="Content-type" content="text/html; charset=utf-8" />

  <title>Basis Demos: Share selection between controls</title>

  <link rel="stylesheet" type="text/css" title="Compat Style" href="../../style/tree/compat/style.css" media="screen" />
  <link rel="alternate stylesheet" type="text/css" title="Vista Style" href="../../style/tree/vista/style.css" media="screen" />
  <link rel="alternate stylesheet" type="text/css" title="Default Style" href="../../style/tree/default/style.css" media="screen" />

  <style type="text/css" id="demo-css">
    HTML,
    BODY
    {
      font-size: small;
      font-family: Tahoma, Verdana, Arial, sans-serif;
    }

    .Basis-Tree
    {
      border: 1px solid #AAA;
      width: 300px;
      height: 400px;
      overflow: auto;
      overflow-y: scroll;
      overflow-x: hidden;
      float: left;
      margin-right: 10px;
    }
  </style>
  <!--[if lt IE 7]>
  <style type="text/css">
    BODY
    {
      font-size: x-small;
    }
  </style>
  <![endif]-->

  <!--[if IE 7]>
  <![endif]-->


  <script type="text/javascript" src="../../basis-all.js"></script>

  <script type="text/javascript" src="../demo.js"></script>
</head>

<body>
  <h1>Basic demos: Share selection between controls</h1>
  
  <p id="demo-summary">
    This demonstration shows how you can share selection between controls (even particular nodes). Use CTRL for multiple node selection.
  </p>
  <div id="demo-description">
    ..
  </div>

  <div id="demo-container"></div>

  <script type="text/javascript" id="demo-javascript">
   
    // make shortcut
    var DOM = basis.dom;
    var nsTree = basis.ui.tree;

    // data for tree
    var data = [
      { data: { title: 'node1' } },
      { data: { title: 'node2' },
        childNodes: [
          { data: { title: 'node2.1' } },
          { data: { title: 'node2.1' } }
        ]
      },
      { data: { title: 'node3' },
        childNodes: [
          { data: { title: 'node3.1' } },
          { data: { title: 'node3.2' } },
          { data: { title: 'node3.3' },
            childNodes: [
              { data: { title: 'node3.3.1' } },
              { data: { title: 'node3.3.2' } },
              { data: { title: 'node3.3.3' } },
              { data: { title: 'node3.3.4' } },
              { data: { title: 'node3.3.5' } }
            ]
          }
        ]
      },
      { data: { title: 'node4' } }
    ];

    var treeChildFactory = function(config){
      if (config.childNodes)
        return new nsTree.Folder(Object.extend({ childFactory: this.childFactory }, config));
      else
        return new nsTree.Node(config);
    };

    //
    // Create tree controls
    //

    // setup selection for control (multiple mode)
    var demoContainer = DOM.get('demo-container');
    var treeSelection = new basis.dom.wrapper.Selection({ multiple: true });
    var tree1 = new nsTree.Tree({
      id: 'Tree1',
      container: demoContainer,
      selection: treeSelection, 
      childFactory: treeChildFactory,
      childNodes: data
    });

    var tree2 = new nsTree.Tree({
      id: 'Tree2',
      container: demoContainer,
      selection: treeSelection,
      childFactory: treeChildFactory,
      childNodes: data
    });

    var tree3 = new nsTree.Tree({
      id: 'Tree3',
      container: demoContainer,
      selection: tree2.selection, // pass tree2 selection object (it is still treeSelection)
      childFactory: treeChildFactory,
      childNodes: data
    });

    // make output of selection content
    var contentText = DOM.createText('nothing');
    DOM.insert(demoContainer, DOM.createElement('', DOM.createElement('LABEL', 'Selection contains: '), contentText));
    treeSelection.addHandler({
      datasetChanged: function(){
        contentText.nodeValue = this.getItems().map(function(node){ return '({0}) {1}'.format(DOM.axis(node, DOM.AXIS_ANCESTOR).pop().element.id, node.data.title) }).join(', ') || 'nothing';
      }
    });

  </script>
</body>

</html>
